<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            width: 300px;
            height: 200px;
            border: 1px solid black;
            padding: 20px;
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        #input {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="container">
        <input type="text" id="input" placeholder="输入内容"><br>
        内容为：<span id="text"></span>
    </div> 

    <script>
        // 方式一：
        // let obj = {};
        // obj = new Proxy(obj, {
        //     get(target, prop) {
        //         return target[prop];
        //     },
        //     set(target, prop, value) {
        //         target[prop] = value;
        //         observer();
        //     }   
        // })

        // function observer() {
        //     text.innerHTML = obj.name;
        //     input.value = obj.name;
        // }
        // // 定时器显示数据
        // setTimeout(() => {
        //     obj.name = "Trist"
        // }, 1000);
        // // 监听input框改变数据
        // input.oninput = function() {
        //     obj.name = this.value;
        // }

        // 方式二：
        var obj = {};
        var obj1 = new Proxy(obj, {
            // target就是第一个参数obj, receive就是返回的obj(返回的proxy对象)
            get: function (target, key, receive) {
                // 返回该属性值
                return target[key];
            },
            set: function (target, key, newVal, receive) {
                // 执行赋值操作
                target[key] = newVal;
                document.getElementById('text').innerHTML = target[key];
            }
        });
        // 监听键盘事件触发
        document.addEventListener('keyup', function (e) {
            obj1[0] = e.target.value;
        });
    </script>
</body>
</html>